<template>
	<view class="search_head">
		<view class="header">
			<view class="blank"
				:style="{
					height: statusBarHeight + 'px'
				}"
			></view>
			<view class="input px-2 py-1"
			>
				<u-search placeholder="请输入关键字..." v-model="keyword"
					:height="80"
					:searchIconSize="50"
					:clearabled="true"
					@search="search()"
					@custom="search()"
					@change="search()"
					@clear="keyword = '';$emit('clear')"
					@focus="$emit('focus')"
				></u-search>
			</view>
		</view>
		<view class="header_blank"></view>
	</view>
</template>

<script>
	export default {
		name: 'searchHead',
		props: {
			
		},
		data() {
			return {
				// 屏幕状态栏高度
				statusBarHeight: 0,
				keyword: '',
				timer: null
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight;
				}
			})
		},
		methods: {
			search() {
				if(this.keyword == "") return this.$emit('clear');
				if(!this.timer) {
					this.$emit("search", this.keyword);
					this.timer = setTimeout(() => {
						clearTimeout(this.timer);
						this.timer = null;
					}, 1000);
				} else {
					this.timer = setTimeout(() => {
						clearTimeout(this.timer);
						this.timer = null;
					}, 1000);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_head{
		.header{
			position: fixed;
			width: 100vw;
			top: 0;
			background-color: white;
			z-index: 999;
			.blank{
				
			}
		}
		.header_blank{
			width: 100vw;
			/* #ifdef H5 */
			height: 110rpx;
			/* #endif */
			/* #ifndef H5 */
			height: 200rpx;
			/* #endif */
			background-color: white;
		}
	}
</style>